<template>
    <div class="home">
        <section class="header">
            <ul>
                <li
                    v-for="(item,index) in numList"
                    :key="item.value"
                    :class="{active:item.index==Aindex }"
                    @click="changeStatus(item.status,item.index)"
                >
                    <span v-if="getUserInfo().role == '30'">{{type[index]}}</span>
                    <span v-if="getUserInfo().role == '31'">{{type2[index]}}</span>
                    ({{item.num}})
                </li>
            </ul>
        </section>
        <section class="body">
            <div class="listDeal">
                <div class="zanwu" v-if="list.length==0">
                    <i class="iconfont icon-zanwushuju"></i>
                    暂无数据
                </div>
                <div
                    class="list"
                    v-for="item in list"
                    :key="item.value"
                    @click="goDetails(item.reportingTime)"
                >
                    <div>
                        <b>{{item.safeName}}</b>
                        <i class="iconfont icon-jiantou-copy right"></i>
                        <span class="chaoshi" v-if="status==0 && item.ifOvertime==1">已超时</span>
                    </div>
                    <div class="flex">
                        <div class="type">隐患数量：{{item.safeNum}}</div>
                        <div class="type">已处理：{{item.safeNum-item.unfinishNum}}/{{item.safeNum}}</div>
                    </div>
                    <div class="flex">
                        <div class="type">时限：{{item.limtTime}}天</div>
                        <div class="type">处理人：{{item.dealName}}</div>
                    </div>
                    <div class="flex">
                        <div class="type">上报：{{item.reportingTime}}</div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import chuli from "@/components/chuli.vue";
import shenhezhong from "@/components/shenhezhong.vue";
import wancheng from "@/components/wancheng.vue";
import daishenhe from "@/components/daishenhe.vue";
import utils from "@/utils";
import { getUserInfo, setUserInfo, logout } from "@/utils/auth";
export default {
    data() {
        return {
            status: 0,
            Aindex: 0,
            numList: [],
            list: [],
            auditing: ["未通过", "", ""],
            type: ["未处理", "审核中", "已完成"],
            type2: ["未处理", "已超时", "审核中", "已完成"]
        };
    },
    components: {
        chuli,
        daishenhe,
        shenhezhong,
        wancheng
    },
    mounted() {
        console.log(getUserInfo().role);
        if (getUserInfo().role == "30") {
            this.getList();
            this.getNum();
        }
        if (getUserInfo().role == "31") {
            this.getList2();
            this.getNum2();
        }
    },
    methods: {
        getUserInfo,
        changeStatus(num, index) {
            this.list = [];
            this.status = num;
            this.Aindex = index;
            if (getUserInfo().role == "30") {
                this.getList();
            }
            if (getUserInfo().role == "31") {
                this.getList2();
            }
        },
        getNum() {
            this.$api.safe.safeOfficerNavigation().then(res => {
                if (res.success) {
                    this.numList = res.data;
                }
            });
        },
        getNum2() {
            this.$api.safe.safeAdminNavigation().then(res => {
                if (res.success) {
                    this.numList = res.data;
                }
            });
        },
        goDetails(reportingTime) {
            if (this.status == "0") {
                this.$router.push({
                    path: "chuli",
                    query: { reportingTime: reportingTime, status: this.status }
                });
            }
            if (this.status == "1") {
                this.$router.push({
                    path: "shenhezhong",
                    query: { reportingTime: reportingTime, status: this.status }
                });
            }
            if (this.status == "2") {
                this.$router.push({
                    path: "wancheng",
                    query: { reportingTime: reportingTime, status: this.status }
                });
            }
        },
        getList() {
            let sta = "";
            if (this.status == 0) {
                sta = "-1,0";
            } else {
                sta = this.status;
            }
            this.$api.safe
                .safeOfficerList({
                    pageNum: 1,
                    pageSize: 10,
                    status: sta
                })
                .then(res => {
                    if (res.success) {
                        this.list = res.data.list;
                    }
                });
        },
        getList2() {
            this.$api.safe
                .safeAdminList({
                    pageNum: 1,
                    pageSize: 10,
                    status: 2
                })
                .then(res => {
                    if (res.success) {
                        this.list = res.data.list;
                    }
                });
        }
    }
};
</script>

<style lang="less">
.home {
    ul {
        display: flex;
        padding: 0px;
        margin: 0px;
        border-bottom: 1px solid #ccc;
    }
    li {
        flex: 1;
        text-align: center;
        line-height: 3.125rem;
    }
    .active {
        color: #03a9f4;
    }
}
</style>
